<template>
  <div id="process">
    <img src="../assets/v2_line.png" class="background" />
    <div class="top"><p class="start">开始</p></div>
    <div class="middle">
      <!-- <div class="middlet">
        <div class="picture">
          <p class="download">D下载</p>
          <span class="ip">172.16.18.209</span>
        </div>
      </div> -->
      <div class="middlet" v-for="(item, index) in producuredata" :key="index">
        <div class="picture" v-if="item.state === 0">
          <img src="../assets/v2_green.png" class="picture" />
          <p class="download">{{ item.name }}</p>
          <span class="ip">{{ item.ip }}</span>
        </div>
        <div class="picture" v-else-if="item.state === 1">
          <img src="../assets/v2_blue.png" class="picture" />
          <p class="downloadb">{{ item.name }}</p>
          <span class="ip">{{ item.ip }}</span>
        </div>
        <div class="picture" v-else-if="item.state === 2">
          <img src="../assets/v2_yellow.png" class="picture" />
          <p class="downloady">{{ item.name }}</p>
          <span class="ip">{{ item.ip }}</span>
        </div>
        <div class="picture" v-else-if="item.state === 3">
          <div class="pictureo">
            <p class="downloadr">{{ item.name }}</p>
            <span class="ip">{{ item.ip }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom"><p class="end">结束</p></div>
  </div>
</template>
<script>
export default {
  name: "Process",
  props: {
    producuredata: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
<style lang="less" scoped>
#process {
  width: 2873px;
  height: 440px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
.top {
  width: 252px;
  height: 84px;
  background: url(../assets/v2_blue.png);
  position: absolute;
  left: 1320px;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom {
  width: 252px;
  height: 84px;
  background: url(../assets/v2_blue.png);
  position: absolute;
  left: 1320px;
  top: 341px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.start,
.end {
  font-size: 24px;
  color: #00c0ff;
}
.middle {
  width: 2760px;
  height: 109px;
  position: absolute;
  top: 163px;
  left: 53px;
  display: flex;
}
.middlet {
  justify-content: center;
  // margin-right: 30px;
  // width: 241px;
  // height: 76px;
  width: 276px;
  height: 109px;
  position: relative;
}
.picture {
  // width: 250px;
  // height: 76px;
  // background: url(../assets/v2_red.gif);
  // text-align: center;
  // line-height: 38px;
  // position: absolute;
  width: 250px;
  height: 80px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 18px;
  margin-left: -125px;
  margin-top: -47.3px;
}
.download {
  color: #13d774;
  font-size: 24px;
}
.downloadb {
  color: #00c0ff;
  font-size: 24px;
}
.downloady {
  color: #ffc000;
  font-size: 24px;
}
.downloadr {
  color: #ff0000;
  font-size: 24px;
}
.ip {
  color: #00c0ff;
  font-size: 22px;
  position: absolute;
  left: 50px;
  top: 80px;
}
.pictureo {
  width: 250px;
  height: 80px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 35px;
  margin-left: -125px;
  margin-top: -47.3px;
  background: url(../assets/v2_red.gif);
}
</style>
